<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点图的使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }
        .box{
            width: 650px;
            height: 265px;
            margin:100px auto;
            border:5px solid #ccc;
            position: relative;


        }
        .box ul{
            position: relative;
            z-index: 1;

        }
        .box ul li{
            position: absolute;
            left:0;
            top:0;

        }
        .box img{
            width: 650px;
            height: 265px;
        }
        .box ol{
            position: absolute;
            right:10px;
            bottom:10px;
            z-index: 2;
        }
        .box ol li{
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin-right: 2px;
            background: #ccc;
            float: left;
        }
        .box ol .cur{
            border:1px solid orangered;
            color: orangered;
            background:#666;
        }
    </style>
</head>
<body>

<div class="box">

    <ol>
        <li class='cur'>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>

    <ul>
        <li><img src="images/01.png" alt=""></li>
        <li><img src="images/02.png" alt=""></li>
        <li><img src="images/03.png" alt=""></li>
        <li><img src="images/04.png" alt=""></li>
    </ul>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*1.移动到ol的li上的时候设置对应的变化*/
        //1.0记录zindex
        var z_index = 1;
        $('ol>li').mouseenter(function () {
            /*1.1当移动到ol中对应li上的时候设置对应的属性
            * 就是给对应的li添加类,其余的兄弟节点移出类*/
            $(this).addClass('cur').siblings().removeClass('cur');
            /*1.2当li发生变化的时候,让对应的图片发生变化*/
            /*1.21获取对应的索引*/
            var index = $(this).index();
            /*1.22每次移动到对应的li的时候,让对应的z_index++*/
            z_index ++;
            /*1,23设置ul中的li的属性,然后隐藏
            * 在使用淡入动画出现*/
            $('ul>li').eq(index).css({zIndex:z_index}).hide().stop().fadeIn(300);
        })
    })
</script>

</body>
</html>